<template>
  <div id="strategy">
    <div id="search">
      <!-- <div class="center"></div> -->
      <!-- <input type="text" class="search" placeholder="请输入关键字" /> -->
      <!-- <button class="button">搜索</button> -->
    </div>
    <div id="tabnav">
      <div
        class="selectbox"
        :class="{active:item==currentTab}"
        @click="clickTab(item)"
        v-for="(item,index) in ['推荐精品','热门游记','最新发布']"
        :key="index"
      >{{item}}</div>
      <div class="towirte" @click="to_write()">我要写文章</div>
      <div class="liner"></div>
      <div id="yjDomBox">
        <ul class="yjList">
          <li class="clearfix" v-for="(item,index) in list" :key="index">
            <div class="yjListLeft">
              <img
                data-id="1121673"
                :src="item.article.headerimgurl"
                data-original-background="none"
                style="background: none;"
              />
              <!-- <span class="jingpin">精品</span> -->
            </div>
            <div class="yjListRight">
              <p
                @click="handleArtcile(item,index)"
                class="yjTitle"
                data-id="1121673"
              >{{item.article.title}}</p>
              <p
                @click="handleArtcile(item,index)"
                class="yjInfo"
                data-id="1121673"
              >{{item.article.intro}}...</p>
              <div class="yjBottom clearfix">
                <a
                  class="leftUserBox"
                  href="/travels/member/person.html?uid=cca485003bdf3cb0227d6e364aada8a2"
                  target="_blank"
                >
                  <span class="leftUserPic">
                    <img :src="'http://localhost:8010/getImage?name='+item.user.avataurl" />
                  </span>
                  <span class="leftUserName">{{item.user.nickname}}</span>
                </a>
                <div class="leftNub">
                  <span class="viewNub">{{item.article.seetimes}}</span>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="pagination">
      <el-pagination
        @current-change="handleCurrentChange"
        background
        layout="prev, pager, next"
        :total="total"
        :current-page.sync="currentPage"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import editor from "@/components/user/kindeditor.vue";
export default {
  components: { editor },
  data() {
    return {
      editorText: "直接初始化值", // 双向同步的变量
      editorTextCopy: "", // content-change 事件回掉改变的对象
      currentTab: "推荐精品",
      total: 0,
      list: [],
      mod: "tuijian",
      currentPage: 1
    };
  },
  created() {
    this.$axios.get("/api2/article/newtotal").then(res => {
      this.total = res.data;
      this.$axios
        .get(
          "/api2/article/list/tuijian?start=" +
            0 +
            "&user_token=" +
            this.$store.state.user.userInfo.token
        )
        .then(res => {
          this.list = res.data.list;
        });
    });
  },
  methods: {
    handleCurrentChange(val) {
      let start = (val - 1) * 10;
      let end = val * 10;
      this.$axios
        .get("/api2/article/list/" + this.mod + "?start=" + start)
        .then(res => {
          this.list = res.data.list;
          document.getElementsByClassName("selectbox")[0].scrollIntoView();
        });
      if (this.mod == "tuijian") {
        this.$axios
          .get(
            "/api2/article/list/tuijian?start=" +
              start +
              "&user_token=" +
              this.$store.state.user.userInfo.token
          )
          .then(res => {
            this.list = res.data.list;
            document.getElementsByClassName("selectbox")[0].scrollIntoView();
          });
      }
    },
    onContentChange(val) {
      this.editorTextCopy = val;
      window.console.log(this.editorTextCopy);
    },
    afterChange() {},
    clickTab(item) {
      this.currentTab = item;
      switch (item) {
        case "推荐精品": {
          this.mod = "tuijian";
          this.handleCurrentChange(1);
          this.currentPage = 1;
          break;
        }
        case "热门游记": {
          this.mod = "hot";
          this.handleCurrentChange(1);
          this.currentPage = 1;
          break;
        }
        case "最新发布": {
          this.mod = "new";
          this.handleCurrentChange(1);
          this.currentPage = 1;
          break;
        }
      }
    },
    to_write() {
      if (this.$store.state.user.userInfo.token) {
        this.$router.push("/strategy/write");
      }else{
        this.$router.push("/user/login");
      }
    },
    handleArtcile(item, index) {
      window.console.log(item);
      this.$store.commit("commons/setArticleId", item.article.id);
      this.$router.push("/strategy/page");
    }
  }
};
</script>

<style lang="less" scoped>
@import url(../../assets/css/home.css);
#strategy {
  background-color: #f6f6f6;
}
ul {
  list-style-type: none;
}
.pagination {
  width: 400px;
  margin: 20px auto;
  margin-bottom: 0px;
  padding: 20px 0;
}
</style>>
